<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Wave Image 3D</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}
		.solid {
			width: 800px;
			height: 360px;
			margin: 90px auto 0;
			box-shadow: 1px 7px 25px #fd8fd9;
		}
		.solid ul {
			height: 100%;
		}
		.solid ul li {
			position: relative;
			float: left;
			box-sizing: border-box;
			transform-style: preserve-3d;
			transform: translateZ(-180px);
		}
		.solid ul li div {
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.solid ul li div:nth-child(1) {
			top: -360px;
			background: url('https://www.html5tricks.com/demo/js-css3-3d-wave-image/img/02.jpg');
			transform-origin: bottom;
			transform: translateZ(180px) rotateX(90deg);
		}
		.solid ul li div:nth-child(2) {
			top: 360px;
			background: url('https://www.html5tricks.com/demo/js-css3-3d-wave-image/img/01.jpg');
			transform-origin: top;
			transform: translateZ(180px) rotateX(-90deg);
		}
		.solid ul li div:nth-child(3) {
			background: url('https://www.html5tricks.com/demo/js-css3-3d-wave-image/img/03.jpg');
			transform: translateZ(180px);
		}
		.solid ul li div:nth-child(4) {
			background: url('https://www.html5tricks.com/demo/js-css3-3d-wave-image/img/04.jpg');
			transform: translateZ(-180px) rotateX(180deg);
		}
		.solid ol {
			position: absolute;
			left: 50%;
			width: 140px;
			height: 20px;
			transform: translateX(-50%);
			display: flex;
			justify-content: space-around;
		}
		.solid ol li {
			width: 20px;
			height: 20px;
			background: black;
			box-shadow: 0 2px 5px white;
			border-radius: 50%;
			color: white;
			text-align: center;
			/*斜体 12px大小/20px行高*/
			font: italic 12px/20px 'Microsoft Yahei';
			cursor: pointer;
		}
		.solid ol li.on {
			background: red;
		}
		.solid ul li:nth-child(1) div {
			background-position-x: 0px;
		}
		.solid ul li:nth-child(2) div {
			background-position-x: -8px;
		}
		.solid ul li:nth-child(3) div {
			background-position-x: -16px;
		}
		.solid ul li:nth-child(4) div {
			background-position-x: -24px;
		}
		.solid ul li:nth-child(5) div {
			background-position-x: -32px;
		}
		.solid ul li:nth-child(6) div {
			background-position-x: -40px;
		}
		.solid ul li:nth-child(7) div {
			background-position-x: -48px;
		}
		.solid ul li:nth-child(8) div {
			background-position-x: -56px;
		}
		.solid ul li:nth-child(9) div {
			background-position-x: -64px;
		}
		.solid ul li:nth-child(10) div {
			background-position-x: -72px;
		}
		.solid ul li:nth-child(11) div {
			background-position-x: -80px;
		}
		.solid ul li:nth-child(12) div {
			background-position-x: -88px;
		}
		.solid ul li:nth-child(13) div {
			background-position-x: -96px;
		}
		.solid ul li:nth-child(14) div {
			background-position-x: -104px;
		}
		.solid ul li:nth-child(15) div {
			background-position-x: -112px;
		}
		.solid ul li:nth-child(16) div {
			background-position-x: -120px;
		}
		.solid ul li:nth-child(17) div {
			background-position-x: -128px;
		}
		.solid ul li:nth-child(18) div {
			background-position-x: -136px;
		}
		.solid ul li:nth-child(19) div {
			background-position-x: -144px;
		}
		.solid ul li:nth-child(20) div {
			background-position-x: -152px;
		}
		.solid ul li:nth-child(21) div {
			background-position-x: -160px;
		}
		.solid ul li:nth-child(22) div {
			background-position-x: -168px;
		}
		.solid ul li:nth-child(23) div {
			background-position-x: -176px;
		}
		.solid ul li:nth-child(24) div {
			background-position-x: -184px;
		}
		.solid ul li:nth-child(25) div {
			background-position-x: -192px;
		}
		.solid ul li:nth-child(26) div {
			background-position-x: -200px;
		}
		.solid ul li:nth-child(27) div {
			background-position-x: -208px;
		}
		.solid ul li:nth-child(28) div {
			background-position-x: -216px;
		}
		.solid ul li:nth-child(29) div {
			background-position-x: -224px;
		}
		.solid ul li:nth-child(30) div {
			background-position-x: -232px;
		}
		.solid ul li:nth-child(31) div {
			background-position-x: -240px;
		}
		.solid ul li:nth-child(32) div {
			background-position-x: -248px;
		}
		.solid ul li:nth-child(33) div {
			background-position-x: -256px;
		}
		.solid ul li:nth-child(34) div {
			background-position-x: -264px;
		}
		.solid ul li:nth-child(35) div {
			background-position-x: -272px;
		}
		.solid ul li:nth-child(36) div {
			background-position-x: -280px;
		}
		.solid ul li:nth-child(37) div {
			background-position-x: -288px;
		}
		.solid ul li:nth-child(38) div {
			background-position-x: -296px;
		}
		.solid ul li:nth-child(39) div {
			background-position-x: -304px;
		}
		.solid ul li:nth-child(40) div {
			background-position-x: -312px;
		}
		.solid ul li:nth-child(41) div {
			background-position-x: -320px;
		}
		.solid ul li:nth-child(42) div {
			background-position-x: -328px;
		}
		.solid ul li:nth-child(43) div {
			background-position-x: -336px;
		}
		.solid ul li:nth-child(44) div {
			background-position-x: -344px;
		}
		.solid ul li:nth-child(45) div {
			background-position-x: -352px;
		}
		.solid ul li:nth-child(46) div {
			background-position-x: -360px;
		}
		.solid ul li:nth-child(47) div {
			background-position-x: -368px;
		}
		.solid ul li:nth-child(48) div {
			background-position-x: -376px;
		}
		.solid ul li:nth-child(49) div {
			background-position-x: -384px;
		}
		.solid ul li:nth-child(50) div {
			background-position-x: -392px;
		}
		.solid ul li:nth-child(51) div {
			background-position-x: -400px;
		}
		.solid ul li:nth-child(52) div {
			background-position-x: -408px;
		}
		.solid ul li:nth-child(53) div {
			background-position-x: -416px;
		}
		.solid ul li:nth-child(54) div {
			background-position-x: -424px;
		}
		.solid ul li:nth-child(55) div {
			background-position-x: -432px;
		}
		.solid ul li:nth-child(56) div {
			background-position-x: -440px;
		}
		.solid ul li:nth-child(57) div {
			background-position-x: -448px;
		}
		.solid ul li:nth-child(58) div {
			background-position-x: -456px;
		}
		.solid ul li:nth-child(59) div {
			background-position-x: -464px;
		}
		.solid ul li:nth-child(60) div {
			background-position-x: -472px;
		}
		.solid ul li:nth-child(61) div {
			background-position-x: -480px;
		}
		.solid ul li:nth-child(62) div {
			background-position-x: -488px;
		}
		.solid ul li:nth-child(63) div {
			background-position-x: -496px;
		}
		.solid ul li:nth-child(64) div {
			background-position-x: -504px;
		}
		.solid ul li:nth-child(65) div {
			background-position-x: -512px;
		}
		.solid ul li:nth-child(66) div {
			background-position-x: -520px;
		}
		.solid ul li:nth-child(67) div {
			background-position-x: -528px;
		}
		.solid ul li:nth-child(68) div {
			background-position-x: -536px;
		}
		.solid ul li:nth-child(69) div {
			background-position-x: -544px;
		}
		.solid ul li:nth-child(70) div {
			background-position-x: -552px;
		}
		.solid ul li:nth-child(71) div {
			background-position-x: -560px;
		}
		.solid ul li:nth-child(72) div {
			background-position-x: -568px;
		}
		.solid ul li:nth-child(73) div {
			background-position-x: -576px;
		}
		.solid ul li:nth-child(74) div {
			background-position-x: -584px;
		}
		.solid ul li:nth-child(75) div {
			background-position-x: -592px;
		}
		.solid ul li:nth-child(76) div {
			background-position-x: -600px;
		}
		.solid ul li:nth-child(77) div {
			background-position-x: -608px;
		}
		.solid ul li:nth-child(78) div {
			background-position-x: -616px;
		}
		.solid ul li:nth-child(79) div {
			background-position-x: -624px;
		}
		.solid ul li:nth-child(80) div {
			background-position-x: -632px;
		}
		.solid ul li:nth-child(81) div {
			background-position-x: -640px;
		}
		.solid ul li:nth-child(82) div {
			background-position-x: -648px;
		}
		.solid ul li:nth-child(83) div {
			background-position-x: -656px;
		}
		.solid ul li:nth-child(84) div {
			background-position-x: -664px;
		}
		.solid ul li:nth-child(85) div {
			background-position-x: -672px;
		}
		.solid ul li:nth-child(86) div {
			background-position-x: -680px;
		}
		.solid ul li:nth-child(87) div {
			background-position-x: -688px;
		}
		.solid ul li:nth-child(88) div {
			background-position-x: -696px;
		}
		.solid ul li:nth-child(89) div {
			background-position-x: -704px;
		}
		.solid ul li:nth-child(90) div {
			background-position-x: -712px;
		}
		.solid ul li:nth-child(91) div {
			background-position-x: -720px;
		}
		.solid ul li:nth-child(92) div {
			background-position-x: -728px;
		}
		.solid ul li:nth-child(93) div {
			background-position-x: -736px;
		}
		.solid ul li:nth-child(94) div {
			background-position-x: -744px;
		}
		.solid ul li:nth-child(95) div {
			background-position-x: -752px;
		}
		.solid ul li:nth-child(96) div {
			background-position-x: -760px;
		}
		.solid ul li:nth-child(97) div {
			background-position-x: -768px;
		}
		.solid ul li:nth-child(98) div {
			background-position-x: -776px;
		}
		.solid ul li:nth-child(99) div {
			background-position-x: -784px;
		}
		.solid ul li:nth-child(100) div {
			background-position-x: -792px;
		}
		.solid ul li:nth-child(1) {
			transition: 0.8s 0s
		}
		.solid ul li:nth-child(2) {
			transition: 0.8s 0.003s
		}
		.solid ul li:nth-child(3) {
			transition: 0.8s 0.006s
		}
		.solid ul li:nth-child(4) {
			transition: 0.8s 0.009s
		}
		.solid ul li:nth-child(5) {
			transition: 0.8s 0.012s
		}
		.solid ul li:nth-child(6) {
			transition: 0.8s 0.015s
		}
		.solid ul li:nth-child(7) {
			transition: 0.8s 0.018s
		}
		.solid ul li:nth-child(8) {
			transition: 0.8s 0.021s
		}
		.solid ul li:nth-child(9) {
			transition: 0.8s 0.024s
		}
		.solid ul li:nth-child(10) {
			transition: 0.8s 0.026999999999999996s
		}
		.solid ul li:nth-child(11) {
			transition: 0.8s 0.03s
		}
		.solid ul li:nth-child(12) {
			transition: 0.8s 0.033s
		}
		.solid ul li:nth-child(13) {
			transition: 0.8s 0.036s
		}
		.solid ul li:nth-child(14) {
			transition: 0.8s 0.039s
		}
		.solid ul li:nth-child(15) {
			transition: 0.8s 0.042s
		}
		.solid ul li:nth-child(16) {
			transition: 0.8s 0.045s
		}
		.solid ul li:nth-child(17) {
			transition: 0.8s 0.048s
		}
		.solid ul li:nth-child(18) {
			transition: 0.8s 0.051s
		}
		.solid ul li:nth-child(19) {
			transition: 0.8s 0.05399999999999999s
		}
		.solid ul li:nth-child(20) {
			transition: 0.8s 0.057s
		}
		.solid ul li:nth-child(21) {
			transition: 0.8s 0.06s
		}
		.solid ul li:nth-child(22) {
			transition: 0.8s 0.063s
		}
		.solid ul li:nth-child(23) {
			transition: 0.8s 0.066s
		}
		.solid ul li:nth-child(24) {
			transition: 0.8s 0.06899999999999999s
		}
		.solid ul li:nth-child(25) {
			transition: 0.8s 0.072s
		}
		.solid ul li:nth-child(26) {
			transition: 0.8s 0.075s
		}
		.solid ul li:nth-child(27) {
			transition: 0.8s 0.078s
		}
		.solid ul li:nth-child(28) {
			transition: 0.8s 0.081s
		}
		.solid ul li:nth-child(29) {
			transition: 0.8s 0.084s
		}
		.solid ul li:nth-child(30) {
			transition: 0.8s 0.087s
		}
		.solid ul li:nth-child(31) {
			transition: 0.8s 0.09s
		}
		.solid ul li:nth-child(32) {
			transition: 0.8s 0.09299999999999999s
		}
		.solid ul li:nth-child(33) {
			transition: 0.8s 0.096s
		}
		.solid ul li:nth-child(34) {
			transition: 0.8s 0.099s
		}
		.solid ul li:nth-child(35) {
			transition: 0.8s 0.102s
		}
		.solid ul li:nth-child(36) {
			transition: 0.8s 0.105s
		}
		.solid ul li:nth-child(37) {
			transition: 0.8s 0.10799999999999998s
		}
		.solid ul li:nth-child(38) {
			transition: 0.8s 0.111s
		}
		.solid ul li:nth-child(39) {
			transition: 0.8s 0.114s
		}
		.solid ul li:nth-child(40) {
			transition: 0.8s 0.11699999999999999s
		}
		.solid ul li:nth-child(41) {
			transition: 0.8s 0.12s
		}
		.solid ul li:nth-child(42) {
			transition: 0.8s 0.12299999999999998s
		}
		.solid ul li:nth-child(43) {
			transition: 0.8s 0.126s
		}
		.solid ul li:nth-child(44) {
			transition: 0.8s 0.129s
		}
		.solid ul li:nth-child(45) {
			transition: 0.8s 0.132s
		}
		.solid ul li:nth-child(46) {
			transition: 0.8s 0.135s
		}
		.solid ul li:nth-child(47) {
			transition: 0.8s 0.13799999999999998s
		}
		.solid ul li:nth-child(48) {
			transition: 0.8s 0.141s
		}
		.solid ul li:nth-child(49) {
			transition: 0.8s 0.144s
		}
		.solid ul li:nth-child(50) {
			transition: 0.8s 0.147s
		}
		.solid ul li:nth-child(51) {
			transition: 0.8s 0.15s
		}
		.solid ul li:nth-child(52) {
			transition: 0.8s 0.153s
		}
		.solid ul li:nth-child(53) {
			transition: 0.8s 0.156s
		}
		.solid ul li:nth-child(54) {
			transition: 0.8s 0.15899999999999997s
		}
		.solid ul li:nth-child(55) {
			transition: 0.8s 0.162s
		}
		.solid ul li:nth-child(56) {
			transition: 0.8s 0.165s
		}
		.solid ul li:nth-child(57) {
			transition: 0.8s 0.168s
		}
		.solid ul li:nth-child(58) {
			transition: 0.8s 0.17099999999999999s
		}
		.solid ul li:nth-child(59) {
			transition: 0.8s 0.174s
		}
		.solid ul li:nth-child(60) {
			transition: 0.8s 0.177s
		}
		.solid ul li:nth-child(61) {
			transition: 0.8s 0.18s
		}
		.solid ul li:nth-child(62) {
			transition: 0.8s 0.183s
		}
		.solid ul li:nth-child(63) {
			transition: 0.8s 0.18599999999999997s
		}
		.solid ul li:nth-child(64) {
			transition: 0.8s 0.18899999999999997s
		}
		.solid ul li:nth-child(65) {
			transition: 0.8s 0.192s
		}
		.solid ul li:nth-child(66) {
			transition: 0.8s 0.195s
		}
		.solid ul li:nth-child(67) {
			transition: 0.8s 0.198s
		}
		.solid ul li:nth-child(68) {
			transition: 0.8s 0.20099999999999998s
		}
		.solid ul li:nth-child(69) {
			transition: 0.8s 0.204s
		}
		.solid ul li:nth-child(70) {
			transition: 0.8s 0.207s
		}
		.solid ul li:nth-child(71) {
			transition: 0.8s 0.21s
		}
		.solid ul li:nth-child(72) {
			transition: 0.8s 0.213s
		}
		.solid ul li:nth-child(73) {
			transition: 0.8s 0.21599999999999997s
		}
		.solid ul li:nth-child(74) {
			transition: 0.8s 0.21899999999999997s
		}
		.solid ul li:nth-child(75) {
			transition: 0.8s 0.222s
		}
		.solid ul li:nth-child(76) {
			transition: 0.8s 0.225s
		}
		.solid ul li:nth-child(77) {
			transition: 0.8s 0.228s
		}
		.solid ul li:nth-child(78) {
			transition: 0.8s 0.23099999999999998s
		}
		.solid ul li:nth-child(79) {
			transition: 0.8s 0.23399999999999999s
		}
		.solid ul li:nth-child(80) {
			transition: 0.8s 0.237s
		}
		.solid ul li:nth-child(81) {
			transition: 0.8s 0.24s
		}
		.solid ul li:nth-child(82) {
			transition: 0.8s 0.243s
		}
		.solid ul li:nth-child(83) {
			transition: 0.8s 0.24599999999999997s
		}
		.solid ul li:nth-child(84) {
			transition: 0.8s 0.249s
		}
		.solid ul li:nth-child(85) {
			transition: 0.8s 0.252s
		}
		.solid ul li:nth-child(86) {
			transition: 0.8s 0.255s
		}
		.solid ul li:nth-child(87) {
			transition: 0.8s 0.258s
		}
		.solid ul li:nth-child(88) {
			transition: 0.8s 0.26099999999999995s
		}
		.solid ul li:nth-child(89) {
			transition: 0.8s 0.264s
		}
		.solid ul li:nth-child(90) {
			transition: 0.8s 0.267s
		}
		.solid ul li:nth-child(91) {
			transition: 0.8s 0.27s
		}
		.solid ul li:nth-child(92) {
			transition: 0.8s 0.273s
		}
		.solid ul li:nth-child(93) {
			transition: 0.8s 0.27599999999999997s
		}
		.solid ul li:nth-child(94) {
			transition: 0.8s 0.27899999999999997s
		}
		.solid ul li:nth-child(95) {
			transition: 0.8s 0.282s
		}
		.solid ul li:nth-child(96) {
			transition: 0.8s 0.285s
		}
		.solid ul li:nth-child(97) {
			transition: 0.8s 0.288s
		}
		.solid ul li:nth-child(98) {
			transition: 0.8s 0.291s
		}
		.solid ul li:nth-child(99) {
			transition: 0.8s 0.294s
		}
		.solid ul li:nth-child(100) {
			transition: 0.8s 0.297s
		}
		.solid ul li, .solid ul li div {
			width: 8px;
			height: 100%
		}
		.solid ul li {
			transform: translateZ(-180px) rotateX(90deg);
		}
		.solid ul li {
			transform: translateZ(-180px) rotateX(180deg);
		}
		.solid ul li {
			transform: translateZ(-180px) rotateX(270deg);
		}
		.solid ul li {
			transform: translateZ(-180px) rotateX(180deg);
		}
	</style>
</head>
<body>
<div class="solid">
	<ul class="oUl">
		<li>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</li>
	</ul>
	<ol>
		<li class="">1</li>
		<li class="on">2</li>
		<li class="">3</li>
		<li class="">4</li>
	</ol>
</div>
<script src="js/waveImage3D.js"></script>
</body>
</html>